import React, { Component } from "react";
import {connect} from "react-redux";
import {RecommendWrapper,RecommendInfo,RecommendInfoRight,RecommendQrcode} from "../style";
class Recommend extends Component {
    getRecommendInfo() {
        const {recommendPicList} = this.props;
        return (
            recommendPicList.map(item => {
                return <RecommendInfo key={item.get('id')} imgUrl={item.get('imgUrl')}/>
            })
        )
    }
    render() {
        const {qrcode} = this.props;
        return (
            <RecommendWrapper>
                {this.getRecommendInfo()}
                <RecommendQrcode className='downLoad-app'>
                    <img src={qrcode.get('imgUrl')} alt="" className='downLoad'/>
                    <RecommendInfoRight>
                        <p className='title'>下载简书手机App</p>
                        <p className='desc'>随时随地发现和创作内容</p>
                    </RecommendInfoRight>
                </RecommendQrcode>
            </RecommendWrapper>
        )
    }
}

const mapState = (state) => ({
    recommendPicList: state.getIn(['home','recommendPicList']),
    qrcode: state.getIn(['home','qrcode'])
});

export default connect(mapState)(Recommend);